<template>
  <div class="car_list">
    <!-- 头部标题 -->
    <myheader></myheader>

    <!-- 列表组件 -->
    <div class="boxlist" v-if="carlist.length != 0">
      <!-- 组件头部 -->
      <div class="header">
        <p style="font-size: 12px; padding: 20px 10px;">共{{ amount }}件宝贝</p>
      </div>
      <van-swipe-cell v-for="item in carlist" :key="item.id">
        <CarListInfo :getcar="item"></CarListInfo>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button del"
            @click="onDel(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!-- 暂无商品列表 -->
    <div class="empty" v-else>
      购物车还是空的哦 ~
    </div>

    <!-- 底部总价 -->
    <div class="footer">
      <div class="title">
        <span
          >合计：<i>￥{{ money }}</i></span
        >
      </div>
      <!-- 结算按钮 -->
      <van-button type="danger" size="small" class="Settlement"
        >结算</van-button
      >
    </div>
    <!-- 按钮状态 -->
    <!-- <p v-for="value in carlist" :key="value.title">{{ value.checked }}</p> -->
  </div>
</template>

<script>
import myheader from "@/components/myheader.vue";
import CarListInfo from "@/components/CarListInfo.vue";
import { getCarList } from "@/apis/goods.js";
export default {
  components: {
    CarListInfo,
    myheader,
  },
  data() {
    return {
      id: [],
      carlist: [],
      amount: 0, // 总数量
      money: 0, //总价钱
    };
  },

  watch: {
    carlist: {
      handler(newArr) {
        // 改变了页面数据就重新添加到本地存储中
        localStorage.setItem("carList", JSON.stringify(this.carlist));
        this.$emit("mycarlength", newArr.length);

        // 监听选中状态
        newArr = newArr.filter(function(value, index) {
          return value.checked == true;
        });
        
        // 商品数量
        let amount = 0;
        // 商品总价
        let money = 0;
        newArr.forEach(function(value, index) {
          amount += value.count;
          money += value.price * value.count;
        });
        this.amount = amount;
        this.money = money;
      },
      // immediate: true,  //进入页面触发
      deep: true, // 深度监听
    },
  },
  mounted() {
    let mycarList = JSON.parse(localStorage.getItem("carList"));
    // 修改页面后对数据本地存储的数据进行修改
    mycarList.forEach((value) => {
      this.id.push(value.id);
    });
    this.carlist = mycarList;
    // console.log(this.carlist);

    // 改造数据
    this.carlist = this.carlist.map((v) => {
      return {
        ...v,
        checked: true,
      };
    });
  },
  methods: {
    // 删除数据 如果删除对应的id等于选中的id就删除
    onDel(id) {
      this.carlist.forEach((v) => {
        this.carlist = this.carlist.filter((v) => {
          return id != v.id;
        });
      });
      console.log(this.carlist);
    },
  },
};
</script>

<style lang="less" scoped>
.car_list {
  min-height: 80vh;
  padding-bottom: 130px;
  background-color: #f8f8f8;
  // 头部
  .header {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .del {
    height: 100%;
  }

  .empty {
    color: #a2a2a2;
    display: flex;
    justify-content: center;
    padding-top: 100px;
  }

  // 底部
  .footer {
    position: fixed;
    bottom: 50px;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;

    .title {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      font-size: 12px;
      margin-right: 10px;
      i {
        color: #e17e53;
      }
    }
    .Settlement {
      border-radius: 30px;
      width: 80px;
      background-color: #d2868e;
      border: none;
      font-size: 10px;
      margin-right: 10%;
    }
  }
}
</style>
